<template>
  <div class="header">
    <Header :title="'可变视角地图'"></Header>
  </div>
  <div class="content">
    <div id="map"></div>
  </div>
</template>

<script lang="ts" setup>
import Header from "@/components/header/header.vue"
import AMapLoader from "@amap/amap-jsapi-loader"
import { reactive, shallowRef } from "@vue/reactivity"
let map = null
const marketList = reactive([
  {
    position: [119.145807, 32.14713],
    iconStyle: "green",
    label: "港华紫荆农庄 设备保有量：24",
    img:"src/assets/images/green.png"
  },
  {
    position: [119.7386, 32.142979],
    iconStyle: "red",
    label: "江苏润果高效生态农业基地 设备保有量：18",
    img:"src/assets/images/blue.png"
  },
])
AMapLoader.load({
  key: "05c6a41e4ea55fdc848c3cd2cfbd8e11", // 申请好的Web端开发者Key，首次调用 load 时必填
  version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: [],
  AMapUI: {
    // 是否加载 AMapUI，缺省不加载
    version: "1.1", // AMapUI 缺省 1.1
    plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
  },
  Loca: {
    // 是否加载 Loca， 缺省不加载
    version: "2.0.0", // Loca 版本，缺省 1.3.2
  },
})
  .then((AMap) => {
    map = new AMap.Map("map", {
      center: [108.946609, 34.262324], //中心点坐标
      zoom: 4,
    })
    marketList.forEach((el) => {
      let content =
        `<div class='custom-content-marker'><img src='${el.img}'/></div>`

      // 创建一个 Marker 实例：
      let marker = new AMap.Marker({
        position: new AMap.LngLat(el.position[0], el.position[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        offset: new AMap.Pixel(-10, -10),
        content: content, // 自定义点标记覆盖物内容
        title: el.label,
      })
      // 将创建的点标记添加到已有的地图实例：
      map.add(marker)
    })
    // 绑定事件
    // marketList.forEach((el) => {
    //   new AMapUI.SimpleMarker({
    //     //前景文字
    //     iconLabel:{
    //       innerHTML: `<br><i>${el.iconLabel}</i>`, //设置文字内容
    //       style:{
    //         color:el.iconStyle,
    //       }
    //     } ,
    //     //背景图标样式
    //     iconStyle: el.iconStyle,
    //     map: map,
    //     position: el.position,
    //   })
    // })
  })
  .catch((e) => {
    console.log(e)
  })
const openDialog = () => {
  alert(1111)
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 50px;
}
.content {
  display: flex;
  width: 100%;
  height: calc(100% - 52px);
  #map {
    width: 100%;
    height: 100%;
  }
}
:deep(.custom-content-marker) {
  position: relative;
  width: 25px;
  height: 34px;
}

:deep(.custom-content-marker img) {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -24px;
  left: -2px;
}
:deep(.amap-marker){
  color:red;
}
</style>
